<template>
	<view>
		<u-navbar back-icon-color="#FFFFFF" title="搜索结果" :background="background" title-color="#FFFFFF"></u-navbar>
		<view class="content">
			<view class="goodsList">
				<view class="goods" v-if="goodslist.length > 0">
					<view class="goods-item" v-for="(item, index) in goodslist" :key="index" @click="goGoods(item.id)">
						<u-lazy-load
							style="background: #ffffff;"
							threshold="-350"
							height="300"
							img-mode="aspectFill"
							border-radius="10"
							:image="item.img"
							:index="index"
							@statusChange="statusChange"
							@clickImg="clickImg"
						></u-lazy-load>
						<view class="goods-item-title u-line-2">{{ item.name }}</view>
						<view class="goods-item-unit">{{ item.toreInfo }}</view>
						<view class="goods-item-price">
							<view>
								<text class="m-price">￥</text>
								{{ item.sellPrice != null ? item.sellPrice : '暂无' }}
								<!-- <text class="unit">原价:{{ item.originalPrice != null ? item.originalPrice : '未认证' }}</text> -->
								<!-- <text class="unit">/瓶</text> -->
							</view>
							<view><u-icon size="46" color="#17933f" name="plus-circle-fill"></u-icon></view>
						</view>
					</view>
					<u-loadmore v-show="!isEmpty" color="$u-type-info-light" bg-color="$u-bg-color" :status="status" @loadmore="getData"></u-loadmore>
				</view>
				<u-empty v-else text="没有查询到商品信息" mode="search"></u-empty>
			</view>
			<view><u-toast ref="uToast" /></view>
			<view>
				<!-- <mask :maskShow="maskShow"></mask> -->
				<u-mask :show="maskShow" :custom-style="{ background: 'rgba(255, 255, 255, 0.1)' }">
					<view class="warp"><u-loading mode="flower" size="40"></u-loading></view>
				</u-mask>
			</view>
		</view>
	</view>
</template>

<script>
import mask from '@/components/ls-mask/mask.vue';
export default {
	components: {
		mask
	},
	data() {
		return {
			keyword: '',
			background: {
				//backgroundColor: '#001f3f'

				// 导航栏背景图
				// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
				// 还可以设置背景图size属性
				// backgroundSize: 'cover',

				// 渐变色
				backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
			},
			//
			status: 'loadmore', //加载更多
			goodslist: [],
			isEmpty: true,
			page: 0,
			size: 20,
			sort: 'id,desc',
			//
			maskShow: false,
			//
			userInfo: {}
		};
	},
	onLoad(option) {
		try {
			const token = uni.getStorageSync('token');
			console.log(token);
			if (token) {
				this.userInfo = uni.getStorageSync('userInfo');
				if(!this.userInfo){
					//#ifdef APP-PLUS
					uni.reLaunch({
						url: '/pages/login/index'
					});
					//#endif
					//#ifdef MP-WEIXIN
					uni.reLaunch({
						url: '/pages/login/xcxLogin'
					});
					//#endif
				}
				console.log(option);
				this.keyword = option.keyword;
				this.getData(this.keyword);
			} else {
				//#ifdef APP-PLUS
				uni.reLaunch({
					url: '/pages/login/index'
				});
				//#endif
				//#ifdef MP-WEIXIN
				uni.reLaunch({
					url: '/pages/login/xcxLogin'
				});
				//#endif
			}
		} catch (e) {
			// error
		}
	},
	methods: {
		//懒加载
		statusChange(status) {
			console.log(status);
		},
		clickImg(img) {
			console.log(img);
		},
		getData(keyword) {
			console.log('getData');
			let _t = this;
			_t.status = 'loading';
			_t.maskShow = true;
			setTimeout(() => {
				_t.getGoods(keyword);
			}, 1500);
		},
		getGoods(keyword) {
			console.log(keyword);
			let _t = this;
			_t.isEmpty = false;
			_t.$u.api.getGoodsList({ name: keyword, page: _t.page, size: _t.size, sort: _t.sort }).then(res => {
				console.log('getGoods');
				console.log(res);
				_t.goodslist = res.data.content;
				_t.maskShow = false;
				console.log(res.data.content.length);
				if (res.data.content.length == 0) {
					_t.isEmpty = true;
					_t.status = 'nomore';
				} else if (res.data.number == res.data.totalPages || res.data.totalPages == 1) {
					_t.status = 'nomore';
				} else {
					_t.status = 'loadmore';
				}
			});
		},
		getMoreGoods() {
			let _t = this;
			_t.page++;
			console.log(_t.page);
			_t.$u.api.getGoodsList({ name: keyword, page: _t.page, size: _t.size, sort: _t.sort }).then(res => {
				console.log('getGoods');
				console.log(res);
				if (res.data.number == res.data.totalPages) {
					_t.status = 'nomore';
				} else {
					_t.goodslist = _t.goodslist.concat(res.data.content);
					_t.status = 'loadmore';
				}
			});
		},
		//跳转详情
		goGoods(goodsId) {
			if (this.userInfo.realName == false) {
				this.$refs.uToast.show({
					title: '当前用户未认证，无法查看更多内容',
					type: 'error'
				});
			} else {
				this.$u.route({
					type: 'to',
					params: {
						goodsId: goodsId
					},
					url: '/pages/goods/index'
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $u-bg-color;
}
.content {
	padding: 30rpx;
}
.goodsList {
	background-color: $u-bg-color;
	.goods {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.goods-item {
			background: #ffffff;
			flex: 0 0 335rpx;
			height: auto;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.goods-item-title {
				padding: 10rpx 10rpx 4rpx 10rpx;
				font-size: 28rpx;
			}
			.goods-item-unit {
				padding: 4rpx 10rpx;
				font-size: 24rpx;
				color: #c8c9cc;
				font-weight: normal;
				.unit {
					padding-left: 6rpx;
					font-size: 24rpx;
					color: #c8c9cc;
					font-weight: normal;
				}
			}
			.goods-item-price {
				padding: 4rpx 10rpx;
				font-size: 32rpx;
				color: #ff9900;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
				.m-price {
					font-size: 24rpx;
					font-weight: normal;
				}
			}
		}
	}
}
.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.rect {
	width: 120px;
	height: 120px;
	background-color: #fff;
}
</style>
